<template>
  <el-tabs type="border-card">
    <el-tab-pane label="微信官方">
      <wx-channel></wx-channel>
    </el-tab-pane>
    <el-tab-pane label="支付宝官方" :lazy="true">
      <ali-channel></ali-channel>
    </el-tab-pane>
    <el-tab-pane label="网商银行" :lazy="true">
      <ws-channel :address="options"></ws-channel>
    </el-tab-pane>
    <el-tab-pane label="富民银行" :lazy="true">
      <fu-channel :address="options"></fu-channel>
    </el-tab-pane>
    <el-tab-pane label="乐刷支付" :lazy="true">
     <le-channel :address="options"></le-channel>
    </el-tab-pane>
    <el-tab-pane label="新大陆" :lazy="true">
      <mainland-channel :address="options"></mainland-channel>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import WxChannel from './channel_components/wx_channel'
import AliChannel from './channel_components/ali_channel'
import FuChannel from './channel_components/fu_channel'
import WsChannel from './channel_components/ws_channel'
import LeChannel from './channel_components/le_channel'
import MainlandChannel from './channel_components/mainland_channel'
import { areaAddress } from '@/api/shop'

export default {
  data() {
    return {
      options: []
    }
  },
  components: {
    WxChannel,
    FuChannel,
    WsChannel,
    LeChannel,
    AliChannel,
    MainlandChannel
  },
  beforeCreate() {
    areaAddress().then(res => {
      if (res.data.errorCode === 0) {
        this.$nextTick(() => {
          this.options = res.data.result
        })
      } else {
        this.$message.error(res.data.errorMsg)
      }
    })
  }
}
</script>